<!--
 * @Author: 李兵 964368540@qq.com
 * @Date: 2024-05-25 10:13:50
 * @LastEditors: xuezhuangzhuang xzz6996@qq.com
 * @LastEditTime: 2025-03-01 23:24:40
 * @FilePath: \crm\pages\form\photo-order-form.vue
 * @Description: 拍照下单  from
-->
<template>
  <view class="form-wrap">
    <u-navbar title="新建拍照下单"></u-navbar>
    <uni-forms
      ref="baseForm"
      :modelValue="formData"
      :rules="rules"
      label-position="left"
      label-width="100px"
    >
      <view class="forms-item-wrap">
        <uni-forms-item label="类型" name="radio" style="margin-top: 16px">
          <u-radio-group v-model="formData.radio">
            <u-radio label="客户类型" name="客户类型"></u-radio>
            <u-radio label="客户名称" name="客户名称"></u-radio>
          </u-radio-group>
        </uni-forms-item>
        <uni-forms-item label="对应客户" name="custom" :required="true">
          <!-- <input
            type="text"
            trim="all"
            v-model="formData.custom"
            placeholder="请输入对应客户"
            placeholder-class="placeholder_class"
          /> -->
          <view class="custom-wrap">
            <view
              style="flex: 1"
              :class="[formData.custom ? 'uni-input-input' : 'select-wrap']"
            >
              {{ formData.custom ? formData.custom : "请选择对应客户" }}</view
            >
            <div style="width: 40px !important">
              <u-button
                @click="tap"
                text="点击搜索"
                type="success"
                size="mini"
              ></u-button>
            </div>
            <!-- <uni-icons
              type="right"
              size="20"
              class="right-arrow"
              color="#171A1D"
              v-if="!formData.custom"
            ></uni-icons> -->
          </view>
        </uni-forms-item>
        <uni-forms-item label="联系人" name="customContacts" :required="true">
          <input
            type="text"
            trim="all"
            v-model="formData.customContacts"
            placeholder="请输入联系人"
            :inputBorder="false"
            placeholder-class="placeholder_class"
          />
          <!-- <view class="custom-wrap" @click="tap">
            <view
              style="flex: 1"
              :class="[
                formData.customContacts ? 'uni-input-input' : 'select-wrap',
              ]"
              >{{
                formData.customContacts
                  ? formData.customContacts
                  : "请选择联系人"
              }}</view
            >

            <uni-icons
              type="right"
              size="20"
              class="right-arrow"
              color="#171A1D"
              v-if="!formData.customContacts"
            ></uni-icons>
          </view> -->
        </uni-forms-item>
        <uni-forms-item
          label="地址"
          name="customContactsAdress"
          :required="true"
        >
          <!-- <input
            type="textarea"
            trim="all"
            v-model="formData.customContactsAdress"
            placeholder="请输入地址"
            :inputBorder="false"
            placeholder-class="placeholder_class"
          />-->
          <view class="custom-wrap" @click="onChooseAddress">
            <view
              style="
                flex: 1;
                line-height: 50rpx !important;
                display: flex;
                align-items: center;
              "
              :class="[
                formData.customContactsAdress
                  ? 'uni-input-input'
                  : 'select-wrap',
              ]"
              >{{
                formData.customContactsAdress
                  ? formData.customContactsAdress
                  : "请选择地址"
              }}</view
            >
            <uni-icons
              type="right"
              size="20"
              class="right-arrow"
              color="#171A1D"
            ></uni-icons>
          </view>
        </uni-forms-item>
        <!-- <uni-forms-item
          label="配送时间"
          name="reservationDeliverTime"
          :required="true"
        >
          <uni-datetime-picker
            type="datetime"
            :clear-icon="false"
            v-model="formData.reservationDeliverTime"
            placeholder="请选择配送时间"
            :border="false"
          >
            <view
              :class="[
                formData.reservationDeliverTime
                  ? 'uni-input-input'
                  : 'select-wrap',
              ]"
              >{{
                formData.reservationDeliverTime
                  ? formData.reservationDeliverTime
                  : "请选择配送时间"
              }}</view
            >
          </uni-datetime-picker>
        </uni-forms-item> -->
        <uni-forms-item label="上楼方式" name="upstairsType" :required="true">
          <SelectPicker
            :range="upstairsTypeData"
            v-model="formData.upstairsType"
          >
            <view
              :class="[
                formData.upstairsType !== null
                  ? 'uni-input-input'
                  : 'select-wrap',
              ]"
              >{{
                formData.upstairsType !== null
                  ? FLOOR_TYPE_MAP[formData.upstairsType]
                  : "请选择上楼方式"
              }}</view
            >
          </SelectPicker>
        </uni-forms-item>
        <uni-forms-item label="图片" :required="true">
          <div style="margin-top: 10px">
            <uni-file-picker
              v-model="fileList"
              fileMediatype="image"
              file-extname="png,jpg"
              mode="grid"
              @select="onSuccess"
              @delete="onDelete"
            />
          </div>
        </uni-forms-item>
        <uni-forms-item label="备注" name="customRemarks">
          <input
            type="textarea"
            trim="all"
            v-model="formData.customRemarks"
            placeholder="如有特殊要求，请填写备注信息"
            :inputBorder="false"
            placeholder-class="placeholder_class"
          />
        </uni-forms-item>
      </view>
    </uni-forms>

    <bottombox>
      <u-button
        type="error"
        text="保存"
        @click="onSumbit"
        :loading="loading"
        :disabled="loading"
      ></u-button>
    </bottombox>
    <!-- <button type="primary" @click="onSumbit" :loading="loading" :disabled="loading">确定</button> -->
    <!-- 选择客户或者联系人组件 -->
    <customers0
      ref="customers0"
      :item="{ attrs: { customId: true } }"
      @change="changeHandle"
    />
    <customers1
      ref="customers1"
      :item="{ attrs: { customId: true } }"
      @change="changeHandle"
    ></customers1>
    <!-- <u-popup
      :show="showfalg"
      mode="bottom"
      width="500rpx"
      closeable
      @close="close"
    >
      <view style="width: 750rpx; height: 460px">
        <div style="line-height: 40px; text-align: center">搜索客户</div>
        <u-input
          placeholder="请输入客户名称"
          border="surround"
          v-model="searchValue"
        >
          <template slot="suffix">
            <u-button
              @tap="search"
              text="搜索"
              type="success"
              size="mini"
            ></u-button>
          </template>
        </u-input>
        <u-empty mode="search" v-if="list && !list.length"> </u-empty>
        <u-list height="400px" v-if="list && list.length">
          <u-list-item v-for="(item, index) in list" :key="index">
            <u-cell :title="item.name" @click="choose(item)"> </u-cell>
          </u-list-item>
        </u-list>
      </view>
    </u-popup> -->
  </view>
</template>
<script>
import { addPhotoOrder } from "@/apis/order/index";
import { getUserInfo } from "@/apis/user";
import SelectPicker from "@/components/select-picker/select-picker";
import { FLOOR_TYPE_ARRAY, FLOOR_TYPE_MAP } from "@/contacts/order";
import customers0 from "@/components/formz/components/customers0.vue";
import customers1 from "@/components/formz/components/customers1.vue";
import { upload } from "@/utils/oss.js";
import { getCompanyListPage } from "@/apis/customer/index";
export default {
  name: "photo-order-form",
  components: {
    SelectPicker,
    customers0,
    customers1,
  },
  onLoad() {},
  data() {
    return {
      showfalg: false,
      loading: false,
      formData: {
        radio: "客户类型",
        customId: null,
        custom: null,
        // customContacts: null,
        // customContactsId: null,
        // customRemarks: null,
        customContacts: null,
        customContactsAdress: null,
        receiveAddressId: null,
      },
      rules: {
        custom: {
          rules: [
            {
              required: true,
              errorMessage: "请输入对应客户",
            },
          ],
        },
        customContacts: {
          rules: [
            {
              required: true,
              errorMessage: "请输入联系人",
            },
          ],
        },
        customContactsAdress: {
          rules: [
            {
              required: true,
              errorMessage: "请输入地址",
            },
          ],
        },
        upstairsType: {
          rules: [
            {
              required: true,
              errorMessage: "请选择上楼方式",
            },
          ],
        },
      },
      upstairsTypeData: FLOOR_TYPE_ARRAY,
      FLOOR_TYPE_MAP,
      fileList: [],
      modalInfo: {
        content:
          "为了您更好的体验小程序的功能，需要获取位置信息，请点击设置开启定位权限",
        confirmText: "设置",
      },
      searchValue: "",
      list: null,
    };
  },
  methods: {
    async search() {
      const data = await getCompanyListPage({
        name: this.searchValue,
      });
      this.list = data.records || [];
    },
    close() {
      this.showfalg = false;
      this.list = null;
      this.searchValue = "";
    },
    choose(item) {
      this.formData = {
        ...this.formData,
        // ...item,
        custom: item.name,
        customId: item.id,
        sysUserId: item.sysUserId,
        sysUserName: item.sysUserName,
      };
      this.close();
    },
    backUpdatePages(data) {
      this.formData.customContacts = data.name;
      this.formData.customContactsAdress = data.detailAddress;
      this.formData.receiveAddressId = data.id;
    },
    tap() {
      if (this.formData.radio == "客户类型") {
        this.$refs.customers0.show();
      } else {
        this.$refs.customers1.show({
          customId: true,
          id: "",
        });
        // this.search();
        // this.showfalg = true;
      }
    },
    // 跳转选择地址
    onChooseAddress() {
      if (!this.formData.customId) {
        uni.showToast({
          title: "请先选择客户",
          icon: "none",
          duration: 2000,
        });
        return;
      }
      uni.navigateTo({
        url: "/pagesform/form/address-list?customId=" + this.formData.customId,
      });
    },
    async onSuccess(file) {
      if (file.tempFiles && file.tempFiles.length) {
        Promise.all(
          file.tempFiles.map(async (item) => {
            const x = await upload(item.url);
            return x;
          })
        ).then((data) => {
          (data || []).forEach((url) => {
            this.fileList.push({
              url,
            });
          });
        });
      }
    },
    onDelete(file) {
      this.fileList = this.fileList.filter((item, i) => i !== file.index);
    },
    async onSumbit() {
      const userInfo = await getUserInfo();
      console.log(userInfo);
      const valid = await this.$refs.baseForm.validate();
      if (valid) {
        try {
          this.loading = true;
          const userInfo = await getUserInfo();
          console.log(userInfo);
          const body = {
            customId: this.formData.customId,
            custom: this.formData.custom,
            saleId: this.formData.saleId,
            saleMan: this.formData.saleMan, // 销售人员
            orderUrl: this.fileList.length
              ? this.fileList.map((item) => item.url).toString()
              : "",
            receiveAddressId: this.formData.receiveAddressId,
            customRemarks: this.formData.customRemarks,
            upstairsType: this.formData.upstairsType,
            operatorUserId: userInfo.sysUser.userId, //登录人id
            operatorUser: userInfo.sysUser.name, //登录人
          };
          await addPhotoOrder(body);
          this.loading = false;
          uni.navigateBack({
            delta: 1, // 返回的页面数
          });
        } catch (error) {
          this.loading = false;
        }
      }
    },
    changeHandle(e) {
      this.formData.customId = e.customId;
      this.formData.custom = e.custom;
      // this.formData.customContacts = e.name;
      // this.formData.customContactsId = e.id;
      this.formData.saleId = e.sysUserId;
      this.formData.saleMan = e.sysUserName; // 销售人员
      console.log(this.formData);
    },
  },
};
</script>
<style lang="scss" scoped>
page {
  background: #f2f4f5;
}

.upstairsType {
  color: #c1c5c9;
  font-size: 15px;
  line-height: 99rpx !important;
  height: 99rpx !important;
}

.custom-wrap {
  display: flex;
  align-items: center;
}
::v-deep {
  .u-radio-group--row {
    margin-top: 16px !important;
  }
}
</style>
